//--------------------------------------------------------------------------------------------------
// title - the window's title; message - what to be shown on the window; type - what kind of the window
// isShield - if shield is needed; isHead - if head is needed; 
function PopUpWindow(title, message, type, isShield, isHead) {
	//--------------------------------------
	// fields
	var _shield = null; // shield the whole screen
	var _dlgBox = null;
	var _title = title;
	var _message = message;
	//var _dialogType = type;
	var _dlgType = type;
	//var INFOR_PROMPT = 0; // information prompt, no button on the dialog
	//var ERROR_PROMPT = 1; // error prompt, one button
	//var ACTION_YES_NO = 2; // two buttons
	var _titleShow;
	var _messageShow;
	var _actionContainer = null;
	// 0 - information; 1 - warniing; 2 - error
	var _headClasses = new Array("infoHead", "warnHead", "errorHead");
	// 0 - information; 1 - warniing; 2 - error
	// var _msgClasses = new Array("infoMsg", "warnMsg", "errMsg");
	
	// the window consists of three parts: head, body and action (place buttons)
	var _isShieldNeeded = (typeof isShield == "undefined") ? true : isShield; // the shield will cover the whole screen
	var _isHeadNeeded = (typeof isHead == "undefined") ? true : isHead; // the shield will cover the whole screen;
	var _isActionNeeded = true;
	var _xPosition = pageWidth() / 3;
	var _yPosition = pageHeight() / 10;
	
	//--------------------------------------
	// initialize
	if (_isShieldNeeded) {
		_shield = createShield();
		document.body.appendChild(_shield);
	}
	_dlgBox = createBox();
	document.body.appendChild(_dlgBox);
	
	//--------------------------------------
	// public interface
	//
	this.updateTitle = function (title) {
		_title = title;
		if (_titleShow !== null) {
			_titleShow.innerHTML = title;
		}
	};
	
	//
	this.updateMessage = function (msg) {
		_message = msg;
		if (_messageShow !== null) {
			_messageShow.innerHTML = msg;
		}
	};
	
	//
	this.show = function () {
		comeUp();
	};
	
	//
	this.hide = function (flag) {
		disappear(flag);
	};
	
	// destroy the window
	this.dispose = function () {
		destroy();
	};
	
	// add a action button
	this.addAction = function (btn) {
		if (btn === null || _actionContainer === null) {
			window.alert("NULL input!");
			return;
		}
		// check if it's a button
		//window.alert(btn.tagName != "INPUT");
		//window.alert(btn.tagName != "INPUT" || btn.tagName != "input" || btn.type != "button");
		if ((btn.tagName != "INPUT" && btn.tagName != "input") || btn.type != "button") {
			window.alert("Should be a button!");
			return;
		}
		_actionContainer.appendChild(btn);
	};
	this.createAction = function (value) {
		var btn = document.createElement("input");
		btn.type = "button";
		btn.className = "confirmBtn";
		btn.value = value;
		btn.onclick = function () {
			window.alert("you should rewrite onclick event handler");
		};
		return btn;
	};
	this.removeActions = function () {
		if (_actionContainer !== null && _actionContainer.childNodes !== null) {
			var nodes = _actionContainer.childNodes;
			for (var i = nodes.length - 1; i >= 0; i -= 1) {
				var nd = nodes[i];
				if (nd !== null) {
					_actionContainer.removeChild(nd);
				}
			}
		}
	};
	this.removeAction = function (act) {
		if (_actionContainer !== null && _actionContainer.childNodes !== null) {
			var nodes = _actionContainer.childNodes;
			for (var i = nodes.length - 1; i >= 0; i -= 1) {
				var nd = nodes[i];
				if (nd == act) {
					_actionContainer.removeChild(nd);
					break;
				}
			}
		}
	};
	
	// resize
	this.resize = function (w, h) {
		if (w <= 0 || h <= 0) {
			return;
		} else {
			if (_dlgBox !== null) {
				_dlgBox.style.width = w + "px";
				_dlgBox.style.height = h + "px";
			}
		}
	};
	
	// relocate
	this.relocate = function(t, l){
		if (l <= 0 || t <= 0) {
			return;
		} else {
			if (_dlgBox !== null) {
				_xPosition = l;
				_yPosotion = t;
			}
		}
	};
	
	//--------------------------------------
	// methods
	// calculate the current window width //
	function pageWidth() {
		return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
	}

	// calculate the current window height //
	function pageHeight() {
		return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null;
	}

	// calculate the current window vertical offset //
	function topPosition() {
		return typeof window.pageYOffset != "undefined" ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
	}

	// calculate the position starting at the left of the window //
	function leftPosition() {
		return typeof window.pageXOffset != "undefined" ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
	}
	
	// create a mask that shields whole screen
	function createShield() {
		var div = document.createElement("div");
		div.id = "CW_screen_shield";
		div.className = "screenShield";
		div.style.width = document.body.scrollWidth + "px";
		div.style.height = document.body.scrollHeight + "px";
		// div.style.zIndex = "1000";
		return div;
	}
	
	// create the main body of the dialog
	function createBox() {
		var div = document.createElement("div");
		div.className = "dialogBox";
		div.alpha = 100;
		//div.style.left = (window.screen.width) / 2;
		//div.style.top = (window.screen.height) / 4;
		div.appendChild(createTable());
		return div;
	}
	
	// create a table
	function createTable() {
		var table = document.createElement("table");
		//table.border = 1;
		table.className = "dlgTable";
		table.cellSpacing = "0";
		if (_isHeadNeeded) {
			table.appendChild(createHead());
		}
		table.appendChild(createBody());
		if (_isActionNeeded) {
			table.appendChild(createActionRow());
		}
		return table;
	}
	
	// create the head
	function createHead() {
		var head = document.createElement("thead");
		head.className = getHeadStyle(_dlgType);
		var tr = document.createElement("tr");
		head.appendChild(tr);
		var td = document.createElement("td");
		tr.appendChild(td);
		_titleShow = document.createElement("div");
		td.appendChild(_titleShow);
		_titleShow.className = "titlePart";
		_titleShow.innerHTML = _title;
		var div = document.createElement("div");
		td.appendChild(div);
		div.className = "btnPart";
		// div.appendChild(createCloseButton());
		return head;
	}
	
	// create a div that puts the message
	function createBody() {
		var body = document.createElement("tbody");
		var tr = document.createElement("tr");
		_messageShow = document.createElement("td");
		_messageShow.className = "messagePart";
		_messageShow.innerHTML = _message;
		tr.appendChild(_messageShow);
		body.appendChild(tr);
		return body;
	}
	
	// create a div that places buttons
	function createActionRow() {
		var body = document.createElement("tbody");
		var tr = document.createElement("tr");
		body.appendChild(tr);
		_actionContainer = document.createElement("td");
		_actionContainer.className = "actionPart";
		tr.appendChild(_actionContainer);
		return body;
	}
	
	// create close button
	function createCloseButton() {
		var btn = document.createElement("input");
		btn.type = "button";
		btn.className = "closeBtn";
		btn.onclick = function () {
			// _shield.removeChild(_dlgBox);
			// disappear(1);
		};
		return btn;
	}

	// delete the elements of popup window
	function destroy() {
		if (_dlgBox != null) {
			document.body.removeChild(_dlgBox);
		}
		if (_shield != null) {
			document.body.removeChild(_shield);
		}
	}
	
	// show the dialog
	function comeUp() {
		if (_shield !== null) {
			//_dlgBox.className = "shield";
			_shield.style.display = "block";
		}
		if (_dlgBox !== null) {
			//_dlgBox.className = "dialogBox";
			_dlgBox.style.display = "block";
			
			var value = 100;
			_dlgBox.alpha = value;
			_dlgBox.style.opacity = (value / 100);
			_dlgBox.style.filter = "alpha(opacity=" + value + ")";
			_dlgBox.style.left = (_xPosition + leftPosition()) + "px";
			_dlgBox.style.top = (_yPosition + topPosition()) + "px";
		}
	}
	
	// return the proper style according the dialog type
	function getHeadStyle(dlgType) {
		if (dlgType >= 0 && dlgType <= _headClasses.length) {
			return _headClasses[dlgType];
		}
		return _headClasses[0];
	}
	/*
	// return the proper style according the dialog type
	function getMsgStyle(dlgType){
		if (dlgType >= 0 && dlgType <= _headClasses.length) {
			return _msgClasses[dlgType];
		}
		return _headClasses[0];
	}
	*/
	// hide the elements immediately
	function disappear(flag) {
		if (!RDC.util.isNumber(flag)) {
			flag = 1;
		}
		if (flag != 1) {
			if (_shield !== null) {
				_shield.style.display = "none";
			}
			if (_dlgBox !== null) {
				_dlgBox.style.display = "none";
			}
		} else {
			disappearSlow();
		}
	}
	
	// ---------------------------
	var TIMER = 50;
	var SPEED = 10;
	function disappearSlow() {
		var dialog = _dlgBox;
		window.clearInterval(dialog.timer);
		dialog.timer = window.setInterval(fade, TIMER);
		//fade();
	}
	
	// the dialog fades
	function fade() {
		var flag = 0;
		var dialog = _dlgBox;
		var value;
		if (flag == 1) {
			value = dialog.alpha + SPEED;
		} else {
			value = dialog.alpha - SPEED;
		}
		dialog.alpha = value;
		dialog.style.opacity = (value / 100);
		dialog.style.filter = "alpha(opacity=" + value + ")";
		if (value >= 99) {
			window.clearInterval(dialog.timer);
			dialog.timer = null;
		} else {
			if (value <= 1) {
				if (_shield !== null) {
					_shield.style.display = "none";
				}
				if (_dlgBox !== null) {
					_dlgBox.style.display = "none";
				}
				window.clearInterval(dialog.timer);
			}
		}
	}
}

//--------------------------------------------------------------------------------------------------
/*
Example of usage:
	PromptDialog.resize(250, 50);
	PromptDialog.relocate(100, 400);
*/
var PromptDialog = new PropmtWindow(0); // global object

// type: 0 - information; 1 - warning; 2 - error
function PropmtWindow(type) {
	var _win = null;
	var _msg = "";
	var STAY_TIME = 3000; // fade five secodes later
	var FADE_INTERVAL = 1; //
	var _promptType = type;
	
	//
	this.resize = function(w, h){
		if(_win == null){
			_win = getPopUpWin(_msg); //new PopUpWindow("", _msg, 1, false, true);
		}
		_win.resize(w, h);
	};
	
	// 
	this.relocate = function(t, l){
		if(_win == null){
			_win = getPopUpWin(_msg); //new PopUpWindow("", _msg, 2, false, false);
		}
		_win.relocate(t, l);
	}
	
	//
	this.show = function(msg){
		_msg = msg;
		if(_win == null){
			_win = getPopUpWin(_msg); //new PopUpWindow("", msg, 2, false, false);
		}
		else {
			_win.updateMessage(msg);
		}
		_win.show();
		window.setTimeout(hide, STAY_TIME);
	};
	
	function getPopUpWin(msg){
		var w = new PopUpWindow("", msg, _promptType, false, false);
		/*	
		var action = w.createAction("X");
		action.onclick = function(){
			w.hide(0);
		}
		w.addAction(action);
		*/
		
		return w;
	}
	
	//
	function hide(){
		_win.hide(FADE_INTERVAL);
	}
	
		
}

//--------------------------------------------------------------------------------------------------
/*
Example of usage:
	<div id="btnSubSec" style="display:none;z-index:1;position:absolute;"></div>
	function createDropMenu(){
		var dropMenu = new DropMenu($("btnSubSec"), "More operations", "60px");
		var item = dropMenu.createItem("New");
		item.id = "item_create";
		item.onclick = function(){
			newGoal();
		};
		dropMenu.addItem(item);
	}
*/
// parent: where to put the menu, it should be a DIV
// title: the name for the menu
// itemWidth: the width of menu items
//--------------------------------------------------------------------------
function DropMenu(itemWidth) {
	var _itemWidth = itemWidth;
	var _panel = null;
	var _itemVec = null;
	
	{
		_panel = createMenu();
	}
	
	function createMenu() {
		/*
		var slt = document.createElement("select");
		slt.className = "dropMenu";	
		slt.appendChild(createItem(null, _title));	
		*/
		var menu = document.createElement("div");
		document.body.appendChild(menu);
		
		menu.className = "dropMenu";
		menu.style.width = _itemWidth;
		menu.appendChild(createPanel());
		menu.appendChild(createBottom());
		menu.onmouseout = function () {
			hide();
		};
		menu.onmouseover = function () {
			display();
		};
		return menu;
	}
	
	//
	function createPanel() {
		var pl = document.createElement("div");
		_itemVec = document.createElement("ul");
		pl.appendChild(_itemVec);
		pl.className = "panel";
		return pl;
	}
	
	//
	function createBottom() {
		var btm = document.createElement("div");
		btm.className = "clear";
		return btm;
	}
	
	//
	function hide() {
		if (_panel !== null) {
			_panel.style.display = "none";
		}
	}
	
	//
	function display() {
		if (_panel !== null) {
			_panel.style.display = "block";
		}
	}
	
	//
	function createMenuItem(action) {
		//var opt = document.createElement("tr");
		var item = null;
		if (action !== null) {
			item = document.createElement("li");
			item.appendChild(action);
		}
		return item;
	}
	
	//----------------------------------
	this.showWith = function(parent) {
		if(parent == null || typeof parent == "undefined") {
			window.alert("wrong input object!");
			return;
		}
		
		parent.onfocus = function(){
			//display();
		}
		parent.onmouseover = function(){
			display();
		}
		parent.onmouseout = function(){
			hide();
		}
		
		// set the location of the panel
		var x = parent.offsetLeft;
	  	var y = parent.offsetTop + parent.offsetHeight ;
		var pt = parent;
		while (pt.offsetParent) {
		    pt = pt.offsetParent;
		    x += pt.offsetLeft;
		    y += pt.offsetTop ;
		}			
		_panel.style.left = x + 2 + "px";
		_panel.style.top = y + "px";		
		_panel.style.display = "block";
	}
	
		// here an action is a button
	this.addItem = function (action) {
		if (_itemVec !== null && action !== null) {
			_itemVec.appendChild(createMenuItem(action));
		}
	};

	// create a button, onclick method should be rewritten
	this.createItem = function (value) {
		var btn = document.createElement("input");
		btn.type = "button";
		btn.value = value;
		btn.className = "item";
		btn.style.width = _itemWidth;
		btn.onmouseover = function () {
			this.className = "itemover";
		};
		btn.onmouseout = function () {
			this.className = "item";
		};
		btn.onclick = function () {
			window.alert("you should rewrite the onclick event methond");
		};
		return btn;
	};
}

// deprecated
function DropMenu2(parent, title, itemWidth) {
	var _title = title;
	var _menu = null;
	var _panel = null;
	var _itemVec = null;
	var _itemWidth = itemWidth;
	
	//------------------------------------
	// initialize
	if (parent !== null) {
		_menu = createMenu();
		parent.appendChild(_menu);
		// parent.defaultStyle = "display:none;z-index:1;position:absolute;";
		// parent.style.postion = "absolute";
		// define the position
		var pNode = parent.parentNode;
		parent.style.left = (pNode.clientWidth + pNode.offsetLeft - parent.clientWidth) + "px";
	}

	// here an action is a button
	this.addItem = function (action) {
		if (_itemVec !== null && action !== null) {
			_itemVec.appendChild(createMenuItem(action));
		}
	};
	
	// 
	this.getMenu = function(){
		return _menu;
	}
	
	// external api
	this.show = function(){
		display(_panel);
	}
	
	/*
	this.enableAction = function(id){
		$(id).disabled = false;
		$(id).style.color = "green";
	}
	
	//
	this.disableAction = function(id){
		$(id).disabled = true;
		$(id).style.color = "black";
	}
	*/
	// create a button, onclick method should be rewritten
	this.createItem = function (value) {
		var btn = document.createElement("input");
		btn.type = "button";
		btn.value = value;
		btn.className = "item";
		btn.style.width = _itemWidth;
		btn.onmouseover = function () {
			this.className = "itemover";
		};
		btn.onmouseout = function () {
			this.className = "item";
		};
		btn.onclick = function () {
			window.alert("you should rewrite the onclick event methond");
		};
		return btn;
	};
	
	// 
	function createMenu() {
		/*
		var slt = document.createElement("select");
		slt.className = "dropMenu";	
		slt.appendChild(createItem(null, _title));	
		*/
		var menu = document.createElement("div");
		menu.className = "dropMenu";
		menu.style.width = _itemWidth;
		menu.appendChild(createHead(_title));
		_panel = createPanel();
		menu.appendChild(_panel);
		menu.appendChild(createBottom());
		menu.onmouseout = function () {
			hide(_panel);
		};
		menu.onmouseover = function () {
			display(_panel);
		};
		return menu;
	}
	
	//
	function hide(pl) {
		if (pl !== null) {
			pl.style.display = "none";
		}
	}
	
	//
	function display(pl) {
		if (pl !== null) {
			pl.style.display = "block";
		}
	}
	
	//
	function createHead(title) {
		var head = document.createElement("div");
		head.className = "head";
		var btn = document.createElement("input");
		btn.type = "button";
		btn.value = title;
		btn.className = "act";
		btn.onclick = function () {
			if (_panel === null) {
				return;
			}
			display(_panel);
			this.blur();
		};
		btn.onmouseover = function () {
			this.className = "actover";
		};
		btn.onmouseout = function () {
			this.className = "act";
		};
		head.appendChild(btn);
		return head;
	}
	
	//
	function createMenuItem(action) {
		//var opt = document.createElement("tr");
		var item = null;
		if (action !== null) {
			item = document.createElement("li");
			item.appendChild(action);
		}
		return item;
	}
	
	//
	function createPanel() {
		var pl = document.createElement("div");
		_itemVec = document.createElement("ul");
		pl.appendChild(_itemVec);
		pl.className = "panel";
		//_itemVec.className = "ul";
		return pl;
	}
	
	//
	function createBottom() {
		var btm = document.createElement("div");
		btm.className = "clear";
		return btm;
	}
}

//--------------------------------------------------------------------------------------------------
/*  USAGE:
	<input type="text" value="hello" style="margin-left: 100px;" onfocus="datePicker.showWith(this);"/>
	var datePicker = new DatePicker();
*/
// textinput: the text input filed box
function DatePicker() {
	var _textInput = null;
	var WEEKDAYS = ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d"];
	//var ROW_NUMBER = 6;
	//var COL_NUMBER = 7;
	var _panel = null;
	var _table = null;
	
	var TABLE_BODY_BK_COLOR = "white";
	var TABLE_LABEL_BK_COLOR = "#E78F28";
	var SEL_COL_BK_COLOR = "#B8D4E8";
	var CONTENT_FONT_COLOR = "black";
	var OTHER_FONT_COLOR = "#7F7F7F";
	var HOVER_BK_COLOR = "#DEE6EE";
	var COL_ID_ARRAY_LENGTH = 3;
	var TABLE_COL_MAX_COUNT = 7;
	var DATE_DEMILITER = "-";
	
	var _curYear; // current year value
	var _curMonth; // current month value
	var _curDate; // current date value
	var _selectedColId = 0; // the selected date column
	var _isMouseInPicker = false; // if the date picker is focused
	var _isFocused = false; // if the input is focused
	
	{
		// initialize
		_panel = createPanel();
	}
	
	//--------------------------------------------------------
	this.showWith = function(textInput) {
		if(textInput == null || typeof textInput == "undefined") {
			alert("wrong input object!");
			return;
		}
		
		// verify the entered date is valid
		var dts = getYMD(textInput.value);
		
		// initialize the date values
		updateCalendarWithDate(dts[0], dts[1], dts[2]);
		
		_textInput = textInput; // document.getElementById(textInputId);
		_isFocused = true;
		// added on 12/31/2009
		_textInput.onchange = function(){
			hide();
		}
		_textInput.onblur = function(){
			if(!_isMouseInPicker) {
				hide();
			}
			_isFocused = false;
		}
		
		// set the location of the panel
		var x = _textInput.offsetLeft;
  		var y = _textInput.offsetTop + _textInput.offsetHeight ;
		var parent = _textInput;
		while (parent.offsetParent) {
		    parent = parent.offsetParent;
		    x += parent.offsetLeft;
		    y += parent.offsetTop ;
		}			
		_panel.style.left = x + "px";
		_panel.style.top = y + "px";		
		_panel.style.display = "block";
	}
	
	//
	function hide() {
		if(_panel.style.display != "none"){
			_panel.style.display = "none";
		}
	}
	
	function setInpuText(data){
		_textInput.value = data;
	}
	
	//--------------------------------------------------------
	function createPanel() {
		var panel = document.createElement("div");
		document.body.appendChild(panel);
		panel.className = "datePicker";
		panel.appendChild(createHead());
		_table = createTable();
		panel.appendChild(_table);
		
		panel.onmouseout = function(){
			_isMouseInPicker = false;
			if(!_isFocused){
				hide();
			}
		}
		panel.onmouseover = function(){
			_isMouseInPicker = true;
		}
		
		return panel;
	}
	
	//
	function createTable() {
		var count = 0;
		var tb = document.createElement("table");
		tb.className = "datetable";
		tb.id = "date_calendar_table";
		
		var tr = document.createElement("tr");
		for (var i = 0; i < TABLE_COL_MAX_COUNT; i += 1){
			th = document.createElement("th");
			th.innerHTML = WEEKDAYS[i];
			tr.appendChild(th);
			
		}
		tb.appendChild(tr);
		
		tbody = document.createElement("tbody");
		tbody.id = tb.id + "_tbody";
		tb.appendChild(createTBody(tb));
		
		return tb;
	}
	
	function createTBody(table){
		var tbody = document.createElement("tbody");
		tbody.id = table.id + "_tbody";		
		tbody.className = "cal-body";
		var row = null;
		for(i = 0; i < 6; i+=1){
			var row = document.createElement("tr");
			tbody.appendChild(row);
			for(j = 0; j < 7; j+=1){
				var col = document.createElement("td");
				row.appendChild(col);
				col.className = "data-col";
				
				col.onmouseover = function(){
					this.style.background = HOVER_BK_COLOR;
				}				
				col.onmouseout = function(){
					this.style.background = (this.id == _selectedColId) ? SEL_COL_BK_COLOR : TABLE_BODY_BK_COLOR;
				}
				col.onclick = function(){			
					setInpuText(getColData(this));
					hide();
				}	
			}
		}
		return tbody;
	}
	
	function createHead(){
		var head = document.createElement("div");
		head.className = "head";
				
		var btn = document.createElement("input");
		btn.type = "button";
		btn.value = "<<";	
		btn.className = "btn";
		btn.onclick = function(){
			lastMonth();
			_isFocused = true;
		}
		head.appendChild(btn);
		
		btn = document.createElement("span");
		btn.id = "selected_date_show";	
		btn.className = "text";
		head.appendChild(btn);
		
		btn = document.createElement("input");
		btn.type = "button";
		btn.value = ">>"; 
		btn.className = "btn";	
		btn.onclick = function(){
			nextMonth();
			_isFocused = true;
		}
		head.appendChild(btn);
		
		btn = document.createElement("input");
		btn.type = "button";
		btn.value = "X"; // added on 12/29/2009
		btn.className = "btn";	
		btn.onclick = function(){
			hide();
		}
		
		head.appendChild(btn);
	
		return head;
	}
		
	function setHeadText(year, month){
		document.getElementById("selected_date_show").innerHTML = year + DATE_DEMILITER + (month < 10 ? "0" : "") + month;
	}
	
	function lastMonth(){
		y = _curYear;
		m = _curMonth;
		if(m == 1){
			y -= 1;
			m = 12;
		}
		else {
			m -= 1;
		}
		updateCalendarWithDate(y, m, _curDate);
	}
	
	function nextMonth(){
		y = _curYear;
		m = _curMonth;
		if(m == 12){
			y += 1;
			m = 1;
		}
		else {
			m += 1;
		}
		updateCalendarWithDate(y, m, _curDate);
	}
	
	function updateCalendarWithDate(year, month, date){
		var col = document.getElementById(genColId(year, month, date));
		if(col != null){
			decorateSelectedCol(col);
		}
		else {
			buildData(_table, year, month, date);
		}
	}
	
	function decorateSelectedCol(col){
		var dts = getYMD(col.id);		
		if(dts[0] != _curYear || dts[1] != _curMonth){
			buildData(_table, dts[0], dts[1], dts[2]);
		}
		else {
			document.getElementById(_selectedColId).style.background = TABLE_BODY_BK_COLOR;					
			_selectedColId = col.id;
			col.style.background = SEL_COL_BK_COLOR;
			
			_curYear = dts[0];
			_curMonth = dts[1];
			_curDate = dts[2];
			
			setHeadText(_curYear, _curMonth);
		}
	}
	
	function buildData(table, year, month, date){
		setHeadText(year, month);

		var fweek = (new Date(year, month - 1, 1)).getDay();
		var theday = new Date(year, month, 0);
		var md = theday.getDate();
		if(date > md){
			date = md;
		}
		_curYear = theday.getFullYear();
		_curMonth = theday.getMonth() + 1;
		_curDate = date;
		
		var max = md + fweek;
		// last month
		var lstMonth = (month == 1) ? 12 : month - 1;
		var lstYear = (month == 1) ? year - 1 : year;
		var lstMax = (new Date(lstYear, lstMonth, 0).getDate())
		// next month
		var nxtMonth = (month == 12) ? 12 : month + 1;
		var nxtYear = (month == 12) ? year + 1 : year;
		var tbody = document.getElementById(table.id + "_tbody");
		var colIndex = 0;
		for(i = 0; i < tbody.childNodes.length; i+=1){
			var row = tbody.childNodes[i];
			for(j = 0; j < row.childNodes.length; j+=1){				
				var col = row.childNodes[j];
				col.style.background = TABLE_BODY_BK_COLOR;
				var num = 0;
				if(colIndex < fweek || colIndex >= max){					
					if(colIndex < fweek){
						num = lstMax - fweek + colIndex + 1;	
						col.id = genColId(lstYear, lstMonth, num);							
					}
					else{					
						num = colIndex - max + 1;
						col.id = genColId(nxtYear, nxtMonth, num);
					}	
					
					col.style.color = OTHER_FONT_COLOR;				
				}			
				else {				
					num = colIndex - fweek + 1;					
					col.id = genColId(year, month, num);	
					if(num == date){
						_selectedColId = col.id;
						col.style.background = SEL_COL_BK_COLOR;
					}
					col.style.color = CONTENT_FONT_COLOR;
				}				
				col.innerHTML = num;
				colIndex += 1;
			}
		}		
	}
	
	function genColId(year, month, date){
		return year + DATE_DEMILITER + month + DATE_DEMILITER + date;
	}
	
	function getColData(col){
		var dts = getYMD(col.id);
		return dts[0] + DATE_DEMILITER + ((dts[1] < 10) ? "0" + dts[1] : dts[1]) + DATE_DEMILITER + ((dts[2] < 10) ? "0" + dts[2] : dts[2]);
	}
	
	function getYMD(dateString){
		var dts = dateString.split(DATE_DEMILITER);
		if(dts.length != COL_ID_ARRAY_LENGTH){
			return createNewDate();
		}
		
		var y = parseInt(dts[0], "10");
		var m = parseInt(dts[1], "10");
		var d = parseInt(dts[2], "10");
		dt = new Date(y, m - 1, d);
		if(y != dt.getFullYear() || m != (dt.getMonth() + 1) || d != dt.getDate()){
			return createNewDate();
		}
		else {
			return [y, m, d];
		}
	}
	
	function createNewDate(){
		d = new Date();
		return [d.getFullYear(), d.getMonth() + 1, d.getDate()];
	}
}

//--------------------------------------------------------------------------------------------------

//------------------------------------------------------
// added on 12/29/2009
/*
	USAGE: 
	<input type="text" value="hello" style="margin-left: 100px;" onfocus="timePicker.showWith(this);"/>
	var timePicker = new TimePicker();
*/
function TimePicker(){
	var _textInput = null;
	var _panel = null;
	var _timeSelector = null;
	// var _lastSelectedOpt = null;
	
	//var SEL_BK_COLOR = "#B8D4E8";
	//var UNSEL_BK_COLOR = "white";	
	var TIME_HOUR_COUNT = 48;	
	var TIME_DEMILITER = ":";
	
	var _isMouseInPicker = false; // if the mouse is in the picker
	var _isFocused = false; // if the input is focused
	
	{
		_panel = createPanel();
	}
	
	//------------------------------------------------------
	this.showWith = function(textInput) {
		if(textInput == null) {
			alert("invalid text input!");
			return;
		}
		
		_textInput = textInput; // document.getElementById(textInputId);
		_isFocused = true;
		_textInput.onchange = function(){
			hide();
		}
		_textInput.onblur = function(){
			// if the focus is removed from the input and the mouse is not above the picker
			if(!_isMouseInPicker) {
				hide();
			}
			_isFocused = false;
		}
		
		setSeletecdOption(_textInput.value);
		
		// set the location of the panel
		var x = _textInput.offsetLeft;
  		var y = _textInput.offsetTop + _textInput.offsetHeight ;
		var parent = _textInput;
		while (parent.offsetParent) {
		    parent = parent.offsetParent;
		    x += parent.offsetLeft;
		    y += parent.offsetTop ;
		}			
		_panel.style.left = x + "px";
		_panel.style.top = y + "px";
		_panel.style.display = "block";	
	}
	
	//------------------------------------------------------	
	function createPanel(){
		var panel = document.createElement("div");
		document.body.appendChild(panel);
		panel.className = "timePicker";
		
		panel.appendChild(createHead());
		panel.appendChild(creatBody());
		
		panel.onmouseout = function(){
			_isMouseInPicker = false;
			if(!_isFocused){
				hide();
			}
		}
		panel.onmouseover = function(){
			_isMouseInPicker = true;
		}
		
		return panel;
	}
	
	function createHead(){
		btn = document.createElement("input");
		btn.type = "button";
		btn.value = "X";
		btn.className = "btn";
		btn.onclick = function(){
			hide();
		}
		return btn;
	}
	
	function creatBody(){
		select = document.createElement("select");
		select.className = "select";
		select.size = TIME_HOUR_COUNT;
		for(i = 0; i < TIME_HOUR_COUNT; i += 1){
			option = document.createElement("option");
			select.appendChild(option);
			data = getData(i);
			option.id = data;
			option.value = data;
			option.text = data;
			/*
			option.onmouseover = function(){
				this.style.background = SEL_BK_COLOR;
			}
			option.onmouseout = function(){
				this.style.background = UNSEL_BK_COLOR;
			}
			*/
		}
		
		select.onchange = function() {
			setData(this.value);
			hide();
			
			// remove the selected status of the selected option
			// opt = this.options[this.selectedIndex];
			// opt.selected = false;
			// opt.style.background = UNSEL_BK_COLOR;
			this.selectedIndex = -1; // for IE, must do it like this so as to remove the seleted status
		}
		select.onfocus = function() {
			_isFocused = true;
		}
		
		_timeSelector = select;
		return select;
	}
	
	function getData(count){
		h = 0;
		m = 0;
		if(count % 2 != 0){
			h = (count - 1) / 2;
			m = 30;
		}
		else {
			h = count / 2;
		}
		return ((h < 10) ? "0" + h : h) + TIME_DEMILITER + ((m < 10) ? "0" + m : m);
	}
	
	function hide(){
		if(_panel.style.display != "none"){
			_panel.style.display = "none";
		}
	}
	
	function setData(data){
		_textInput.value = data;
	}
	
	function setSeletecdOption(time){
		// get correct time. the regular expression ensures the hour of time is between 00 ~ 29
		tm = null;
		if(!/[0-2][0-9]:[0-9]{2}/.test(time)){
			tm = createNewTime();
		}
		else {
			tm = new Array(2);
			ts = time.split(TIME_DEMILITER);
			tm[0] = parseInt(ts[0], "10");
			if(tm[0] > 23){
				tm = createNewTime();
			}
			else {
				tm[0] = ts[0];
				tm[1] = (parseInt(ts[1], "10") < 30) ? "00" : "30";
			}
		}
		
		time = tm[0] + TIME_DEMILITER + tm[1];
		node = document.getElementById(time);
		if(node != null){
			/*
			if(_lastSelectedOpt != null && _lastSelectedOpt != node){
				_lastSelectedOpt.style.background = UNSEL_BK_COLOR;
				_lastSelectedOpt.selected = false;
			}
			_lastSelectedOpt = node;
			node.selected = true;
			node.style.background = SEL_BK_COLOR;
			*/
			_timeSelector.selectedIndex = node.index;
			
		}
		else {
			alert("error happened in setting the right option");
		}
	}
	
	function createNewTime(){
		dt = new Date();
		h = (dt.getHours() < 10) ? "0" + dt.getHours() : dt.getHours();
		m = (dt.getMinutes() < 30) ? "00" : "30";
		
		return [h, m];
	}
}

// -----------------------------------------------------
// parent: where the panel should be shown when the mouse moves
// -----------------------------------------------------		
function PortablePanel(parent){
	var _panel = createPanel();
	var _isMouseOnParent = false;
	var _isMouseOnPanel = false;
	var _parent = parent;
	
	//-----------------------------------------
	// _parent.style.display = "block";
	_parent.onmouseover = function(e){
		// event is a global property in IE
		x = 0;
		y = 0;
		if(typeof event !== "undefined"){
			// the browser is IE
			x = event.x;
			y = event.y;
		}
		else {
			x = e.pageX;
			y = e.pageY;
		}
		// evt = (typeof event !== "undefined") ? window.event : e;
		_isMouseOnParent = true;
		_panel.style.left = document.body.scrollLeft + x + 5 + "px";
		_panel.style.top = document.body.scrollTop + y + 5 + "px";
		showOrHide();
	};
	
	_parent.onmouseout = function(){
		_isMouseOnParent = false;
		showOrHide();		
	};
	
	_panel.onmouseover = function(){
		_isMouseOnPanel = true;
		showOrHide();
	};
	
	_panel.onmouseout = function(){
		_isMouseOnPanel = false;
		showOrHide();
	};
	
	this.addContent = function(node){
		node.style.display = "block";
		_panel.appendChild(node);
	}
	
	function showOrHide(){
		if(_isMouseOnParent || _isMouseOnPanel){
			if(_panel.style.display !== "block"){
				_panel.style.display = "block";
			}
		}
		else {
			if(_panel.style.display !== "none"){
				_panel.style.display = "none";
			}
		}
	}

	//-----------------------------------------
	function createPanel() {
		var panel = document.createElement("div");
		document.body.appendChild(panel);
		panel.className = "portablePanel";
		//panel.appendChild(createHead());
		return panel;
	}
}	
	

